<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <div class="app" id="app">
      <section class="z-header">
        <div class="z-header-left">
          <div class="z-header-time" id="zHeaderTime"></div>
          <div class="z-header-date" id="zHeaderDate"></div>
        </div>
        <div class="z-header-title">
          <span class="title">Zabbix告警监控大屏</span>
        </div>
        <div class="z-header-right">
          <span class="z-fullscreen-btn" id="zFullscreenBtn">
            <i></i>
          </span>
        </div>
      </section>

      <section class="z-main">
        <!-- 左侧 -->
        <div class="z-main-left">
          <section class="z-card">
            <div class="z-card-header">
              <span class="z-card-title">告警严重性分类</span>
            </div>
            <div
              class="chart-alarmSeverityClass-legend"
              id="chartAlarmSeverityClassLegend">
              <!-- <div class="legend-item">
                <span class="legend-icon is-blue"></span>
                <span class="legend-label">一般严重</span>
                <span class="legend-value">33.00%</span>
              </div>
              <div class="legend-item">
                <span class="legend-icon is-green"></span>
                <span class="legend-label">严重</span>
                <span class="legend-value">33.00%</span>
              </div>
              <div class="legend-item">
                <span class="legend-icon is-yellow "></span>
                <span class="legend-label">信息</span>
                <span class="legend-value">33.00%</span>
              </div>
              <div class="legend-item">
                <span class="legend-icon is-white"></span>
                <span class="legend-label">警告</span>
                <span class="legend-value">33.00%</span>
              </div> -->
            </div>
            <div class="chart-top" id="alarmSeverityClass"></div>
          </section>
          <section class="z-card">
            <div class="z-card-header">
              <span class="z-card-title">主机组告警数</span>
            </div>
            <div class="chart-pendingIssueLeft-legend">
              <span class="legend-icon"></span>
              <span class="legend-label">异常设备</span>
            </div>
            <div class="chart-center" id="pendingIssueLeft"></div>
          </section>
          <section class="z-card">
            <div class="z-card-header">
              <span class="z-card-title">告警趋势</span>
            </div>
            <div class="chart-alertTrends-legend">
              <span class="legend-icon"></span>
              <span class="legend-label">告警数量</span>
            </div>
            <div class="chart-bottom" id="alertTrends"></div>
          </section>
        </div>
        <div class="z-main-center">
          <!-- 统计 - 顶部 -->
          <ul class="z-main-statistics">
            <li class="statistics-item">
              <div class="statistics-item-icon icon-statistic1"></div>
              <div class="statistics-item-right">
                <div class="statistics-label">主机数量</div>
                <div class="statistics-value">
                  <span class="value" id="hostCount"></span>
                  <span class="unit"></span>
                </div>
              </div>
            </li>
            <li class="statistics-item">
              <div class="statistics-item-icon icon-statistic2"></div>
              <div class="statistics-item-right">
                <div class="statistics-label">监控失效主机</div>
                <div class="statistics-value">
                  <span class="value" id="disMonitoredHostCount"></span>
                  <span class="unit"></span>
                </div>
              </div>
            </li>
            <li class="statistics-item">
              <div class="statistics-item-icon icon-statistic3"></div>
              <div class="statistics-item-right">
                <div class="statistics-label">未归类主机</div>
                <div class="statistics-value">
                  <span class="value" id="unsortedHostCount"></span>
                  <span class="unit"></span>
                </div>
              </div>
            </li>
            <li class="statistics-item">
              <div class="statistics-item-icon icon-statistic4"></div>
              <div class="statistics-item-right">
                <div class="statistics-label">主机组数量</div>
                <div class="statistics-value">
                  <span class="value" id="hostGroupCount"></span>
                  <span class="unit"></span>
                </div>
              </div>
            </li>
          </ul>

          <!-- 地图 -->
          <section
            id="mapChart"
            class="map-chart"
            style="height: calc(100% - 3.75vw)"></section>
          <!-- 拓扑图 -->
          <section
            id="cy"
            class="cy-map"
            style="height: 30.2vw; display: none"></section>
          <!-- tab切换 -->
          <ul class="z-main-tab" id="zMainTab">
            <li class="z-main-tab-item is-active" data-id="0">
              <img class="icon" src="./images/icon-map.png" alt="" />
              <span class="label">地图</span>
            </li>
            <li class="z-main-tab-item" data-id="1">
              <img class="icon" src="./images/icon-diagram.png" alt="" />
              <span class="label">拓扑图</span>
            </li>
          </ul>
          <!-- 统计左侧 -->
          <div class="z-left-statistics">
            <div class="side-statistics-item">
              <div class="title">告警主机组数</div>
              <div class="value is-red" id="hostAlarmCount"></div>
            </div>
            <div class="side-statistics-item">
              <div class="title">待处理告警数</div>
              <div class="value is-yellow" id="pendingAlarmCount"></div>
            </div>
          </div>
          <!-- 统计右侧 -->
          <div class="z-right-statistics">
            <div class="side-statistics-item">
              <div class="title">监控服务机</div>
              <div class="value is-cyan" id="monitorServerCount"></div>
            </div>
            <div class="side-statistics-item">
              <div class="title">已处理告警数</div>
              <div class="value is-blue" id="solvedAlarmCount"></div>
            </div>
          </div>
          <!-- 待处理告警 -->
          <section class="z-card pending-alarm-card">
            <div class="z-card-header big-bg">
              <span class="z-card-title">待处理告警</span>
            </div>
            <div class="z-card-body">
              <table class="z-table">
                <colgroup>
                  <col style="width: 20%" />
                  <col style="width: 20%" />
                  <col style="width: 20%" />
                  <col style="width: 20%" />
                  <col style="width: 20%" />
                </colgroup>
                <thead>
                  <tr>
                    <th>时间</th>
                    <th>IP</th>
                    <th>主机</th>
                    <th>问题</th>
                    <th>严重性</th>
                  </tr>
                </thead>
              </table>
              <div class="z-table-scroll" id="tableScroll">
                <table class="z-table">
                  <colgroup>
                    <col style="width: 20%" />
                    <col style="width: 20%" />
                    <col style="width: 20%" />
                    <col style="width: 20%" />
                    <col style="width: 20%" />
                  </colgroup>
                  <tbody id="pendingAlarmTable">
                    <!-- <tr>
                    <td>2024-08-24</td>
                    <td>192.168.255.255</td>
                    <td>z*****qs</td>
                    <td>H****out</td>
                    <td>
                      <span class="severity-tag is-yellow">一般严重</span>
                    </td>
                    <td>4</td>
                  </tr>
                  <tr>
                    <td>2024-08-24</td>
                    <td>192.168.255.255</td>
                    <td>z*****qs</td>
                    <td>H****out</td>
                    <td>
                      <span class="severity-tag is-red">警告</span>
                    </td>
                    <td>4</td>
                  </tr> -->
                  </tbody>
                </table>
              </div>
            </div>
          </section>
        </div>
        <!-- 右侧 -->
        <div class="z-main-right">
          <section class="z-card">
            <div class="z-card-header">
              <span class="z-card-title">主机状态统计</span>
            </div>
            <div class="chart-hostStatus-legend" id="chartHostStatusLegend">
              <!-- <div class="legend-item">
                <span class="legend-icon is-blue"></span>
                <span class="legend-label">正常监控</span>
                <span class="legend-value">33.00%</span>
              </div>
              <div class="legend-item">
                <span class="legend-icon is-green"></span>
                <span class="legend-label">未命名主机</span>
                <span class="legend-value">33.00%</span>
              </div>
              <div class="legend-item">
                <span class="legend-icon is-yellow"></span>
                <span class="legend-label">正常监控</span>
                <span class="legend-value">33.00%</span>
              </div> -->
            </div>
            <div class="chart-top" id="hostStatus"></div>
          </section>
          <section class="z-card">
            <div class="z-card-header">
              <span class="z-card-title">待处理问题主机</span>
            </div>
            <div class="chart-pendingIssueRight-legend">
              <span class="legend-icon"></span>
              <span class="legend-label">待处理数量</span>
            </div>
            <div class="chart-center" id="pendingIssueRight"></div>
          </section>
          <section class="z-card">
            <div class="z-card-header">
              <span class="z-card-title">告警问题严重性及问题数量</span>
            </div>
            <div class="chart-severityAlerts-legend">
              <div class="legend-item">
                <span class="legend-icon-bar"></span>
                <span class="legend-label">告警数量</span>
              </div>
              <div class="legend-item">
                <span class="legend-icon-line"></span>
                <span class="legend-label">待处理数量</span>
              </div>
            </div>
            <div class="chart-bottom" id="severityAlerts"></div>
          </section>
        </div>
      </section>
    </div>
    <script src="./js/假数据.js"></script>
    <script src="./lib/jquery.min.js"></script>
    <script src="./lib/echarts.min.js"></script>
    <script src="./lib/cytoscape.min.js"></script>
    <script src="./lib/dayjs/dayjs.min.js"></script>
    <script src="./lib/dayjs/zh-cn.js"></script>
    <script src="./js/index.js"></script>
    <script src="./js/getData.js"></script>
  </body>
</html>
